<template>
  <div class="app-container">
    <el-card class="min-height">
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%"
      >
        <el-table-column property="key" label="键名" width="120">
          <template slot-scope="{ row, $index }">
            <el-input v-if="$index === editIndex" v-model="key"></el-input>
            <span v-else v-text="row.key"></span>
          </template>
        </el-table-column>
        <el-table-column property="value" label="值名" width="120">
          <template slot-scope="{ row, $index }">
            <el-input v-if="$index === editIndex" v-model="value"></el-input>
            <span v-else v-text="row.value"></span>
          </template>
        </el-table-column>
        <el-table-column property="lable" label="简介">
          <template slot-scope="{ row, $index }">
            <el-input v-if="$index === editIndex" v-model="lable"></el-input>
            <span v-else v-text="row.lable"></span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row, $index }">
            <div v-if="editIndex === $index">
              <el-button size="small" @click="handleSave($index)"
                >保存</el-button
              >
              <el-button size="small" @click="editIndex = -1">取消</el-button>
            </div>
            <div v-else>
              <el-button size="small" @click="handleEdit(row, $index)"
                >操作</el-button
              >
              <el-button size="small" @click="deleteEdit(row, $index)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="margin-top-10">
        <el-col>
          <el-button @click="addItem">添加一个</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  createDictionaries,
  getDictionaries,
  deleteDictionaries,
} from "@/api/table";
export default {
  name: "dictionaries",
  data() {
    return {
      tableData: [],
      currentRow: null,
      key: null,
      value: null,
      lable: null,
      editIndex: -1,
      page: 1,
      total: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getDictionaries({ page: this.page }).then((res) => {
        this.tableData = res.data.lists;
        this.total = res.data.total;
      });
    },
    handleCurrentChange(row) {
      this.currentRow = row;
    },
    deleteEdit(row) {
      deleteDictionaries({ id: row.id }).then((res) => {
        this.getData();
      });
    },
    addItem() {
      this.tableData.push({
        key: "",
        value: "",
        lable: "",
      });
      this.editIndex = this.tableData.length - 1;
    },
    handleEdit(row, $index) {
      this.key = row.key;
      this.value = row.value;
      this.lable = row.lable;
      this.id = row.id;
      this.editIndex = $index;
    },
    handleSave() {
      if (!this.key || !this.lable || !this.value) {
        return false;
      }
      let data = {
        key: this.key,
        lable: this.lable,
        value: this.value,
      };
      if (this.id) {
        data.id = this.id;
      }
      createDictionaries(data).then((res) => {
        this.getData();
        this.editIndex = -1;
      });
    },
  },
};
</script>
